@keyframes za-moveUp-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.za-moveUp-enter {
  animation: za-moveUp-enter both ease-in;
}

@keyframes za-moveUp-leave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 100%, 0);
  }
}

.za-moveUp-leave {
  animation: za-moveUp-leave both ease-out;
}

@keyframes za-moveDown-enter {
  from {
    transform: translate3d(0, -100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.za-moveDown-enter {
  animation: za-moveDown-enter both ease-in;
}

@keyframes za-moveDown-leave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -100%, 0);
  }
}

.za-moveDown-leave {
  animation: za-moveDown-leave both ease-out;
}

@keyframes za-moveLeft-enter {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.za-moveLeft-enter {
  animation: za-moveLeft-enter both ease-in;
}

@keyframes za-moveLeft-leave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}

.za-moveLeft-leave {
  animation: za-moveLeft-leave both ease-out;
}

@keyframes za-moveRight-enter {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.za-moveRight-enter {
  animation: za-moveRight-enter both ease-in;
}

@keyframes za-moveRight-leave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}

.za-moveRight-leave {
  animation: za-moveRight-leave both ease-out;
}
